
<template>
    <template v-for="(item, index) in props.menuData">
        <!-- 无子菜单-->
        <el-menu-item v-if="!item.children || item.children.length == 0"
                      :index="`${props.index}-${item.meta.id}`"
                      :key="`${props.index}-${item.meta.id}`"
                      @click="handleClick(item,`${props.index}-${item.meta.id})`)"
        >
            <el-icon size="20">
                <component :is="item.meta.icon"></component>
            </el-icon>
            <span>{{item.meta.name}}</span>
        </el-menu-item>
        <!-- 含子菜单-->
        <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
            <template #title>
                <el-icon size="20">
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{item.meta.name}}</span>
            </template>
            <tree-menu :index="`${props.index}-${item.meta.id}`"
                       :menuData="item.children" />
        </el-sub-menu>
<!--    </div>-->

    <!-- 无子菜单-->

    </template>
</template>

<script setup>
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    const store = useStore();
    const router = useRouter();
    // 获取外部数据
    const props = defineProps(['menuData', 'index']);

    // 点击菜单
    const handleClick = (item,active)=>{
        //console.log('active',active);
        // 跳转
        router.push(item.meta.path);
        // 加入数据
        store.commit('addMenu', item.meta);
        //store.commit('updateMenuActive', active);

    }

</script>

<style scoped>

</style>
